import { useEffect } from "react"
import * as echarts from 'echarts';

const Rader = () => {
    useEffect(()=>{
        
var chartDom = document.getElementById('rader-chart');
var myChart = echarts.init(chartDom,'dark');
var option;
window.addEventListener("resize", () => {
    myChart.resize();
  });
option = {
    backgroundColor:'',
  title: {
    text: ''
  },

  tooltip: {
    trigger: 'item'
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '主干道路运行速度偏差率', max: 65 },
      { name: '高峰平均速度', max: 160},
      { name: '路网高延时运行时间占比', max: 30 },
      { name: '路网高峰行程延时指数', max: 38 },
      { name: '路网拥堵路段里程比', max: 52 },
      { name: '常发拥堵路段里程比', max: 25 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [42, 50, 20, 35, 18, 10],
          name: 'Allocated Budget'
        },
      ]
    }
  ]
};

option && myChart.setOption(option);

    },[])
    return(
        <div id="rader-chart" style={{width:'100%',height:'100%'}}>

        </div>
    )
}
export default Rader